<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!--
          type: flex 表示使用flex布局
          justify 设置水平方向的对齐方式
         -->
        <!-- 公司名称 -->
        <TreeTool :is-company="true" :tree-node="company" @addEvent="addFn" />
        <!-- 树形组件 -->
        <el-tree :data="treeData" :props="{ label: 'name' }" default-expand-all>
          <!--
            v-slot="{data}" 里面的data是tree组件内部帮我们循环了treeData，然后把treeData数组中的
            对象通过作用域插槽的形式返回给我们，所以这个data指的是treeData数组中的对象。
           -->
          <template v-slot="{ data }">
            <!--
              标签属性都是小写的
              treeNode可以写成tree-node属性，他们属于同一个属性
             -->
            <!-- {{ data }} -->
            <TreeTool
              :tree-node="data"
              @delEvent="delFn"
              @addEvent="addFn"
              @editEvent="editFn"
            />
          </template>
        </el-tree>
        <!-- 父传子 -->
        <!-- <son :company-son="6666" :test="treeData" /> -->
      </el-card>
      <!-- 新增部门弹窗
      弹窗组件逻辑代码会比较多，因此可以把弹窗组件
      单独封装起来使用
       -->
      <!-- <AddDept
        :show-dialog="showDialog"
        @closeEvent="showDialog=false"
      /> -->
      <AddDept
        ref="addDept"
        :show-dialog.sync="showDialog"
        :cur-dept="curDeptData"
        @updateEvent="getDepartments"
      />
    </div>
  </div>
</template>
<script>
import TreeTool from './components/tree-tool.vue'
import { getDepartments, delDepartment } from '@/api/departments'
import AddDept from './components/add-dept.vue'
import { listToTree } from '@/utils/index.js'
export default {
  components: { TreeTool, AddDept },
  data() {
    return {
      showDialog: false,
      company: {
        name: '传智教育',
        manager: '负责人',
        id: ''
      },
      treeData: [
        {
          name: '总裁办',
          manager: '管理员'
        }, {
          name: '技术部',
          manager: '小明',
          children: [
            {
              name: '前端研发部',
              manager: '小芳'
            },
            {
              name: 'java研发部',
              manager: '尤玉玺'
            }
          ]
        }
      ],
      curDeptData: {}
    }
  },
  async created() {
    // 获取部门列表数据，因为其代码需要复用到
    // 所以把获取部门列表的代码都封装在一个函数中
    this.getDepartments()
  },
  methods: {
    // 编辑部门
    editFn(treeNode) {
      // 因为编辑部门的时候，同样需要显示弹窗
      // 把点击的部门对象传递给子组件，
      // 也要校验部门名称和编码是否重名，
      // 所以新增部门要做的事情，编辑的时候也要做
      // 即然做的事情是一样的，那么我们直接调用
      // 新增的函数即可
      this.addFn(treeNode)
      // 编辑的要进行表单回显，因此需要调用获取详情的
      // 函数，从而获取对应的数据进行回显
      // 因为DOM更新是异步的，因此在子组件中不能立刻获取到
      // 传过去的部门id，那如何解决呢？
      // 答：我们可以通过$nextTick解决，因为$nextTick的回调函数是在
      // DOM更新后触发的
      this.$nextTick(() => {
        this.$refs.addDept.getDepartmentDetail()
      })
    },
    // 删除部门
    delFn(id) {
      // console.log(90, id)
      this.$confirm('是否确定删除？', '删除', {
        type: 'warning'
      }).then(async() => {
        // 调用接口 --只是删除了后端的数据
        await delDepartment(id)
        // 刷新列表
        this.getDepartments()
        // console.log('点击了确定按钮')
      }).catch(err => {
        console.log('点击了取消按钮', err)
      })
    },
    // 新增部门
    addFn(treeNode) {
      this.showDialog = true
      this.curDeptData = treeNode
      // 直接调用子组件的getDepartments方法
      // console.log(87, this.$refs.addDept)
      this.$refs.addDept.getDepartments()
    },
    // 获取部门列表数据
    async getDepartments() {
      const res = await getDepartments()
      // 保存公司名称
      this.company.name = res.companyName
      // 保存部门列表数据
      this.treeData = listToTree(res.depts, '')
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
